<template>
  <view class="address-container">
    <view class="header">
      <text class="title">管理收货地址</text>
      <button class="add-btn" @click="createaddress">+ 新建</button>
    </view>
    
    <view class="address-list">
      <view v-for="item in product" :key="item.id" class="address-item">
        <view class="address-info">
          <text class="address-text">
            <text class="highlight">收货人{{ item.consignee }}</text>
            <text class="highlight">联系方式{{ item.phone }}</text>
          </text>
          <text class="address-detail">
            所在地区：{{ item.region }}详细地址：{{ item.address }}门牌号：{{ item.doorNumber }}
          </text>
        </view>
        <view class="action-btns">
          <text class="edit-btn" @click="editbtn(item.id)">编辑</text>
          <text class="delete-btn" @click="deletebtn(item.id)">删除</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import config from "@/Config.js";
export default {
  data() {
    return {
      product: [],
      token: ""
    };
  },
  onShow() {
    this.query();
    this.token = uni.getStorageSync("token");
  },
  onLoad() {
    this.query();
    this.token = uni.getStorageSync("token");
  },
  methods: {
    // 删除地址
    deletebtn(id) {
      uni.request({
        url: config.config+`/address/${id}`, // 替换为你的API地址和资源ID
        method: "DELETE",
        header: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${this.token}` // 使用获取到的token
        },
        success: (res) => {
          console.log("删除成功", res.data);
          uni.showToast({
            title: "删除成功",
            icon: "success"
          });
          this.query();
          // 这里可以添加删除成功后的逻辑，如刷新列表等
        },
        fail: (err) => {
          console.error("删除失败", err);
		  console.log(id)
          uni.showToast({
            title: "删除失败",
            icon: "none"
          });
        }
      });
    },
    // 编辑
    editbtn(id) {
      uni.navigateTo({
        url: `/pages/updateaddress/updateaddress?id=${id}`
      });
    },
    createaddress() {
      uni.navigateTo({
        url: "/pages/createaddress/createaddress"
      });
    },
    query() {
      uni.request({
        url:config.config+ "/address",
        method: "GET",
        header: {
          "Content-Type": "application/json"
        },
        success: (res) => {
          console.log("请求成功:", res);
          // 获取本地token
          this.token = uni.getStorageSync("token");
          // 过滤数据
          this.product = res.data.filter(item => item.token === this.token);
        }
      });
    }
  }
};
</script>

<style>
.address-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.add-btn {
  background-color: #07c160;
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

.address-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.address-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.address-item:last-child {
  border-bottom: none;
}

.address-info {
  margin-bottom: 20rpx;
}

.address-text {
  display: block;
  font-size: 32rpx;
  margin-bottom: 15rpx;
}

.highlight {
  margin-right: 30rpx;
  font-weight: bold;
}

.address-detail {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.action-btns {
  display: flex;
  justify-content: flex-end;
}

.edit-btn,
.delete-btn {
  padding: 8rpx 25rpx;
  border-radius: 6rpx;
  font-size: 26rpx;
  margin-left: 20rpx;
}

.edit-btn {
  color: #07c160;
  border: 1rpx solid #07c160;
}

.delete-btn {
  color: #ff4d4f;
  border: 1rpx solid #ff4d4f;
}
</style>    